//引入gulp模块
const gulp = require('gulp');
// 引入jshint
const jshint = require('gulp-jshint')
// 引入babel
const babel = require('gulp-babel');
// 引人browserify
const browserify = require('gulp-browserify');
// 引入重命名的包
const rename = require('gulp-rename');
// 引入uglify 
const uglify = require('gulp-uglify');

const less = require('gulp-less');
const LessAutoprefix = require('less-plugin-autoprefix');
const autoprefix = new LessAutoprefix({ browsers: ['last 20 versions'] });
const concat = require('gulp-concat');

const cssmin = require('gulp-cssmin');

const htmlmin = require('gulp-htmlmin');
// 热更新相关包
const livereload = require('gulp-livereload');
const connect = require('gulp-connect');
const opn = require('opn');

//定义任务
gulp.task('hello', async function () {
    console.log(123);
});
gulp.task('jshint', async function () {
    // 将你的任务的任务代码放在这
    return gulp.src('./src/js/*.js')
        // pipe 管道
        .pipe(jshint())
        .pipe(jshint.reporter('default')).pipe(livereload());
})

// babel任务
gulp.task('babel', async function () {
    return gulp.src('./src/js/*.js')
        .pipe(babel({ //进行语法转换
            // 此处预设 一定要注意 不是 es2015
            presets: ['@babel/env']
        })).pipe(gulp.dest('build/js')).pipe(livereload());//输出到指定目录
})

gulp.task('browserify', async function () {
    return gulp.src('./build/js/*.js')
        .pipe(browserify())					//将CommonJs语法转换为浏览器能识别的语法
        .pipe(rename('built.js'))			//为了防止冲突将文件重命名
        .pipe(gulp.dest('build/js')).pipe(livereload());
})

gulp.task('uglify', function () {
    return gulp.src('build/js/built.js')
        .pipe(uglify())  //压缩js
        .pipe(rename('dist.min.js'))
        .pipe(gulp.dest('dist/js')).pipe(livereload());
})

gulp.task('css',function(){
    return gulp.src('./src/css/*.css')
        .pipe(gulp.dest('./build/css')).pipe(livereload());
})

gulp.task('less', function () {
    return gulp.src('./src/css/*.less')
        .pipe(less({
            plugins: [autoprefix]//自动扩展前缀
        }))
        .pipe(gulp.dest('./build/css')).pipe(livereload());
});


gulp.task('concat', function () {
    return gulp.src('./build/css/*.css')
        // 合并之后的文件名
        .pipe(concat('built.css'))
        // 最终的目标路径
        .pipe(gulp.dest('./build/css/concat')).pipe(livereload());
});

gulp.task('cssmin', function () {
    return gulp.src('build/css/concat/built.css')
        .pipe(cssmin())
        .pipe(rename('dist.min.css'))
        .pipe(gulp.dest('dist/css')).pipe(livereload());
});

gulp.task('htmlmin', () => {
    return gulp.src('src/index.html')
        .pipe(htmlmin({
            collapseWhitespace: true,//去除空格
            removeComments: true //去除注释
        }))
        .pipe(gulp.dest('dist')).pipe(livereload());
});

gulp.task('default', gulp.series('jshint', 'babel', 'browserify', 'uglify'));

gulp.task('watch', function () {// gulp watch
    //2. 启动热加载服务
    livereload.listen();
    //3. 通过自己服务器打开项目，自动刷新
    connect.server({
        root: 'dist',
        port: 3000, // localhost:3000/index.html
        livereload: true
    });
    //3. 自动打开浏览器
    opn('http://localhost:3000/index.html');
    //4. 监视指定文件（第一个参数），一旦文件发生变化，就自动执行后面的任务（第二个参数）
    gulp.watch('src/css/*.css', gulp.series(['css']));
    gulp.watch('src/css/*.less', gulp.series(['less', 'concat', 'cssmin']));
    gulp.watch('./src/js/*.js', gulp.series(['jshint', 'babel', 'browserify', 'uglify']));
    gulp.watch('./src/index.html', gulp.series('htmlmin'));
});



